<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <canvas style="border: 2px solid red" width="500" height="400"></canvas>
  <script>
    // 获取canvas
    var canvas = document.querySelector('canvas')
    // 定义画布
    var ctx = canvas.getContext('2d')
    // 绘制   
    // x,y,r,start,end,boolean   
    // x:圆心的x坐标
    // y:圆心的y坐标
    // r:半径
    // start:开始角度   0     Math.PI*2
    // end:结束角度
    // boolean:顺时针[false]，逆时针[true]
    ctx.arc(300,200,100,0,2*Math.PI,true)  
    ctx.stroke()
  </script>

</body>
</html>